<!-- 交易佣金 生成报表 -->
<template>
  <div>
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/transactionCommissionTable' }">交易佣金</el-breadcrumb-item>
      <el-breadcrumb-item>生成报表</el-breadcrumb-item>
    </el-breadcrumb>

    <div>
      <p>选择报表月份</p>
      <el-date-picker
        v-model="cmonth"
        type="month"
        :picker-options="pickerOptions"
        placeholder="选择月"
      ></el-date-picker>
    </div>

    <table border="1">
      <tr>
        <th>报表类型</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>交易佣金</td>
        <td>
          <a
            style="text-decoration: none"
            href="javascript:void(0);"
            title
            @click="openbindstrandard()"
          >{{bindtips}}</a>
        </td>
      </tr>
    </table>

    <div style="margin: 40px 0 0 180px">
      <el-button type="primary" @click="generateReport()">生成报表</el-button>
      <el-button type="primary" @click="cancel()">取消</el-button>
    </div>

    <el-dialog title="选择区间标准" :visible.sync="selectDialogVisible" width="40%" class="dialog" center>
      <div>
        <el-row :span="24" :gutter="20">
          <el-col :span="18">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              size="normal"
              v-model="version"
            ></el-input>
          </el-col>
          <el-col :span="6">
            <el-button size="normal" type="primary" @click="searchlist">查询</el-button>
          </el-col>
        </el-row>

        <div class="mt20" style="margin-left: 60px;height: 400px;overflow-y: auto;">
          <div
            class="selectedInterval-item"
            v-for="item in standardlist"
            :key="item.id"
            @click="selectradio(item.id)"
          >
            <div>
              <el-radio
                @change="selectradio(item.id)"
                :label="item.id"
                v-model="selectedInterval"
                key="item.id"
                :value="item.id"
              >&nbsp;</el-radio>
            </div>
            <div>
              <div>提取标准：交易佣金</div>
              <div>佣金来源：{{commSource[item.commSource]}}</div>
              <div>提取规则：{{extractCategory[item.extractCategory]}}</div>
              <div>计提节点：交易及佣金</div>
              <div>版本：{{item.version}}</div>
            </div>
            <div>
              <el-button
                style="float:right;margin-right:20px;"
                type="text"
                @click="standardDetail(item.id)"
              >查看详情</el-button>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer" style="text-align: center !important;">
        <el-button @click="ensure">绑定</el-button>
        <el-button type="primary" @click="selectDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 标准详情 -->
    <el-dialog title="标准详情" append-to-body :visible.sync="dialogDetail">
      <transaction-commission-handle :viewDetailReceiveId="standardId"/>
      <span slot="footer" class="dialog-footer" style="text-align: center !important;">
        <el-button type="primary" @click="dialogDetail = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/apiPath";
import transactionCommissionHandle from '../standardManage/transactionCommissionHandle';
import {
  extractStandard,
  commSource,
  extractCategory,
  calNode
} from "../fieldMap";

export default {
  components: {
    transactionCommissionHandle
  },
  data() {
    return {
      extractStandard,
      commSource,
      extractCategory,
      calNode,
      bindtips: "绑定标准",
      cmonth: undefined,
      selectDialogVisible: false,
      dialogDetail: false,
      selectDialogInputValue: "",
      selectedInterval: "",
      standardlist: undefined,
      version: undefined,
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > Date.now();
        }
      },
      standardId: ''
    };
  },
  created() {
    this.getstandard();
  },
  mounted() {},
  methods: {
    standardDetail(id) {
      this.standardId = id;
      console.log(this.standardId)
      this.dialogDetail = true;
    },
    searchlist() {
      this.getstandard();
    },
    selectradio(val) {
      this.selectedInterval = +val;
    },
    getTimeString(timestamp) {
      if (!timestamp) {
        return "";
      }
      const time = new Date(timestamp);
      let dateStr = "";
      const year = time.getFullYear(); //当前完整年数 （4位 1970-？？？）
      const month =
        String(time.getMonth() + 1).length === 1
          ? "0" + (time.getMonth() + 1)
          : time.getMonth() + 1;
      dateStr = year + "-" + month;
      return dateStr;
    },
    generateReport() {
      let month = this.getTimeString(this.cmonth);
      if (month == "") {
        this.$message({
          message: "请选择日期",
          type: "warning"
        });
        return;
      }
      this.$confirm("是否确认生成报表?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .post(api.CreateCommissionReport, { month: month })
            .then(res => {
              if (res && res.data.code == 200) {
                this.$message({
                  message: "生成报表成功",
                  type: "success"
                });
                this.$router.push({ path: "/transactionCommissionTable" });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    cancel() {
      this.$router.push({ path: "/transactionCommissionTable" });
    },
    ensure() {
      let month = this.getTimeString(this.cmonth);
      if (this.selectedInterval == "") {
        this.$message({
          message: "请绑定标准",
          type: "warning"
        });
        return;
      }
      if (month == "") {
        this.$message({
          message: "请选择日期",
          type: "warning"
        });
        return;
      }

      this.axios
        .post(api.bindCommissionStandard, {
          month: month,
          dealId: this.selectedInterval
        })
        .then(res => {
          if (res && res.data.code == 200) {
            this.$message({
              message: "绑定成功！",
              type: "success"
            });

            let interval = this.selectedInterval;
            let arr = this.standardlist.filter(function(item, index, array) {
              return item.id == interval;
            });
            this.bindtips = arr[0].version;
            this.selectDialogVisible = false;
          }
        });
    },
    getstandard() {
      this.axios
        .post(api.getDealAllotList, { version: this.version })
        .then(res => {
          if (res && res.data.code == 200) {
            this.standardlist = res.data.data.list;
          }
        });
    },
    openbindstrandard() {
      this.selectDialogVisible = true;
    }
  }
};
</script>

<style scoped lang="stylus">
table {
  border-collapse: collapse;
  margin-top: 50px;
}

table, td, th {
  border: 1px solid #ccc;
}

td, th {
  width: 300px;
  height: 40px;
  text-align: center;
}

th {
  background-color: rgb(239, 239, 239);
}

.selectedInterval-item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;

  > div:first-child {
    width: 50px;
    text-align: center;
  }

  > div:last-child {
    flex: 1;
  }
}
</style>
